<div class="content-section introduction">
    <div>
        <span class="feature-title">Schedule</span>
        <span>Schedule is an event calendar based on FullCalendar. This sample demonstrates a crud scenario using a Dialog.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-schedule [events]="events" [header]="header" defaultDate="2017-02-01" [eventLimit]="4" [editable]="true"
                (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>
    
    <p-dialog header="Event Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="false" [contentStyle]="{'overflow':'visible'}"
        [style]="{'overflow':'visible'}" [resizable]="false">
        <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="event">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="vin">Title</label></div>
                <div class="ui-grid-col-8"><input pInputText id="title" [(ngModel)]="event.title" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="start">Start</label></div>
                <div class="ui-grid-col-8"><p-calendar [(ngModel)]="event.start" dateFormat="yy-mm-dd" dataType="string"></p-calendar></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="end">End</label></div>
                <div class="ui-grid-col-8"><p-calendar [(ngModel)]="event.end" dateFormat="yy-mm-dd" dataType="string"></p-calendar></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="allday">All Day</label></div>
                <div class="ui-grid-col-8"><p-checkbox [(ngModel)]="event.allDay" binary="checkbox"></p-checkbox></div>
            </div>
        </div>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="deleteEvent()" label="Delete" [disabled]="!event?.id"></button>
                <button type="button" pButton icon="fa-check" (click)="saveEvent()" label="Save" [disabled]="!event?.start"></button>
            </div>
        </p-footer>
    </p-dialog>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;ScheduleModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Schedule is based on <a href="http://fullcalendar.io/">FullCalendar</a>. For a complete documentation and samples please refer to the fullcalendar website.
            Events of schedule should be an array and defined using the events property.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events"&gt;&lt;/p-schedule&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    events: any[];

    ngOnInit() &#123;
        this.events = [
            &#123;
                "title": "All Day Event",
                "start": "2016-01-01"
            &#125;,
            &#123;
                "title": "Long Event",
                "start": "2016-01-07",
                "end": "2016-01-10"
            &#125;,
            &#123;
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            &#125;,
            &#123;
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            &#125;,
            &#123;
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            &#125;
        ];
    &#125;
    
&#125;
</code>
</pre>
            <p>In a real application, it is likely to populate the events by making a service call, when the events are updated, schedule component will detect the change and render them.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
@Injectable()
export class EventService &#123;
    
    constructor(private http: Http) &#123;&#125;

    getEvents() &#123;
        return this.http.get('showcase/resources/data/scheduleevents.json')
                    .toPromise()
                    .then(res =&gt; &lt;any[]&gt; res.json().data)
                    .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    events: any[];

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
    &#125;
    
&#125;
</code>
</pre>

            <h3>Lazy Loading</h3>
            <p>onViewRender call is used to implement lazy loading which is triggered when a new date-range is rendered or when the view type changes.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" (onViewRender)="loadEvents($event)"&gt;&lt;/p-schedule&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
loadEvents(event) &#123;
    let start = event.view.start
    let end = event.view.end
    this.events = this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
&#125;
</code>
</pre>
            

            <h3>Event API</h3>
            <p>Event object has various properties to define an event, refer to <a href="http://fullcalendar.io/docs/event_data/Event_Object/">official documentation</a> for the whole list.</p>

            <h3>Header Customization</h3>
            <p>Header is customized using the header property that takes an object as its value. Default configuration is;</p>
<pre>
<code class="language-javascript" pCode ngNonBindable>
&#123;
    left:   'title',
    center: '',
    right:  'today prev,next'
&#125;
</code>
</pre>

            <p>Here is a customized version of header.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" [header]="headerConfig"&gt;&lt;/p-schedule&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    events: any[];
    
    headerConfig: any;

    ngOnInit() &#123;
        this.headerConfig = &#123;
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		&#125;;
    &#125;
    
&#125;
</code>
</pre>

            <h3>Localization</h3>
            <p>Localization for different languages and formats is defined by binding the settings object to the locale property. 
                Following is a schedule with Spanish month names.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" locale="es"&gt;&lt;/p-schedule&gt;
</code>
</pre>

            <p>Visit the <a href="https://fullcalendar.io/docs/text/locale/">fullcalendar documentation</a> to get the available locales.</p>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>events</td>
                            <td>array</td>
                            <td>An array of events to display.</td>
                        </tr>
                        <tr>
                            <td>header</td>
                            <td>object</td>
                            <td><a href="http://fullcalendar.io/docs/display/header/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>isRTL</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/display/isRTL/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>weekends</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/display/weekends/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>hiddenDays</td>
                            <td>array</td>
                            <td><a href="http://fullcalendar.io/docs/display/hiddenDays/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>locale</td>
                            <td>object</td>
                            <td><a href="https://fullcalendar.io/docs/text/locale/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>fixedWeekCount</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/display/fixedWeekCount/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>weekNumbers</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/display/weekNumbers/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>businessHours</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/display/businessHours/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>height</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/display/height/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>contentHeight</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/display/contentHeight/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>aspectRatio</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/display/aspectRatio/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventLimit</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/display/eventLimit/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>defaultDate</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/defaultDate/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>editable</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/editable/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>droppable</td>
                            <td>boolean</td>
                            <td><a href="https://fullcalendar.io/docs/dropping/droppable/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventStartEditable</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventStartEditable/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventDurationEditable</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventDurationEditable/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>defaultView</td>
                            <td>string</td>
                            <td><a href="http://fullcalendar.io/docs/views/defaultView/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>allDaySlot</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/allDaySlot/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>allDayText</td>
                            <td>string</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/allDayText/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>slotDuration</td>
                            <td>Duration</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/slotDuration/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>slotLabelInterval</td>
                            <td>Duration</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/slotLabelInterval/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>snapDuration</td>
                            <td>Duration</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/snapDuration/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>scrollTime</td>
                            <td>Duration</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/scrollTime/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>minTime</td>
                            <td>Duration</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/minTime/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>maxTime</td>
                            <td>Duration</td>
                            <td><a href="hhttp://fullcalendar.io/docs/agenda/maxTime/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>slotEventOverlap</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/agenda/slotEventOverlap/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>nowIndicator</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/nowIndicator/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>dragRevertDuration</td>
                            <td>number</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/dragRevertDuration/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>dragOpacity</td>
                            <td>number</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/dragOpacity/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>dragScroll</td>
                            <td>boolean</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/dragScroll/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventOverlap</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventOverlap/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventConstraint</td>
                            <td>any</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventConstraint/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>eventRender</td>
                            <td>Function</td>
                            <td><a href="https://fullcalendar.io/docs/event_rendering/eventRender/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>dayRender</td>
                            <td>Function</td>
                            <td><a href="https://fullcalendar.io/docs/display/dayRender/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>timezone</td>
                            <td>boolean|string</td>
                            <td><a href="https://fullcalendar.io/docs/timezone/timezone/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>timeFormat</td>
                            <td>string</td>
                            <td><a href="https://fullcalendar.io/docs/text/timeFormat/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>options</td>
                            <td>Object</td>
                            <td>A configuration object to define properties of FullCalendar that do not have a corresponding option in schedule.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onDayClick</td>
                            <td><a href="http://fullcalendar.io/docs/mouse/dayClick/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventClick</td>
                            <td><a href="http://fullcalendar.io/docs/mouse/eventClick/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventMouseover</td>
                            <td><a href="http://fullcalendar.io/docs/mouse/eventMouseover/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventMouseout</td>
                            <td><a href="http://fullcalendar.io/docs/mouse/eventMouseout/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventDragStart</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventDragStart/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventDragStop</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventDragStop/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventDrop</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventDrop/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventResizeStart</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventResizeStart/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventResizeStop</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventResizeStop/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onEventResize</td>
                            <td><a href="http://fullcalendar.io/docs/event_ui/eventResize/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onViewRender</td>
                            <td><a href="http://fullcalendar.io/docs/display/viewRender/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>onViewDestroy</td>
                            <td><a href="http://fullcalendar.io/docs/display/viewDestroy/">Read more</a></td>
                        </tr>  
                        <tr>
                            <td>onDrop</td>
                            <td><a href="https://fullcalendar.io/docs/dropping/drop/">Read more</a></td>
                        </tr>                        
                    </tbody>
                </table>
            </div>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" [header]="headerConfig" (onEventClick)="handleEventClick($event)"&gt;&lt;/p-schedule&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    handleEventClick(e) &#123;
        //e.event = Selected event
        //e.jsEvent = Browser click event
        //e.view = Current view object
    &#125;
    
&#125;
</code>
</pre>
            
            <h3>Methods</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>prev()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/prev/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>next()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/next/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>prevYear()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/prevYear/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>nextYear()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/nextYear/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>today()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/today/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>gotoDate(date)</td>
                            <td>date: Date to navigate</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/gotoDate/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>incrementDate(duration)</td>
                            <td>duration: Duration to add to current date</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/incrementDate/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>getDate()</td>
                            <td>-</td>
                            <td><a href="http://fullcalendar.io/docs/current_date/getDate/">Read more</a></td>
                        </tr>
                        <tr>
                            <td>changeView(viewName)</td>
                            <td>viewName: A valid view string to change to</td>
                            <td><a href="https://fullcalendar.io/docs/views/changeView/">Read more</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" #fc&gt;&lt;/p-schedule&gt;

&lt;button type="button" pButton (click)="back(fc)"&gt;&lt;/p-button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    back(fc) &#123;
        fc.prev();
    &#125;
    
&#125;
</code>
</pre>
            
            <h3>Dependencies</h3>
            <p><a href="http://fullcalendar.io/docs/usage/">FullCalendar</a>.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/schedule" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-schedule [events]="events" [header]="header" defaultDate="2017-02-01" [eventLimit]="4" [editable]="true"
            (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"&gt;&lt;/p-schedule&gt;

&lt;p-dialog header="Event Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="false" [contentStyle]="&#123;'overflow':'visible'&#125;"
    [style]="&#123;'overflow':'visible'&#125;" [resizable]="false"&gt;
    &lt;div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="event"&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="vin"&gt;Title&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="title" [(ngModel)]="event.title" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="start"&gt;Start&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;p-calendar [(ngModel)]="event.start" dateFormat="yy-mm-dd" dataType="string"&gt;&lt;/p-calendar&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="end"&gt;End&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;p-calendar [(ngModel)]="event.end" dateFormat="yy-mm-dd" dataType="string"&gt;&lt;/p-calendar&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="allday"&gt;All Day&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;p-checkbox [(ngModel)]="event.allDay" binary="checkbox"&gt;&lt;/p-checkbox&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p-footer&gt;
        &lt;div class="ui-dialog-buttonpane ui-helper-clearfix"&gt;
            &lt;button type="button" pButton icon="fa-close" (click)="deleteEvent()" label="Delete" [disabled]="!event?.id"&gt;&lt;/button&gt;
            &lt;button type="button" pButton icon="fa-check" (click)="saveEvent()" label="Save" [disabled]="!event?.start"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/p-footer&gt;
&lt;/p-dialog&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class ScheduleDemo implements OnInit &#123;

    events: any[];
    
    header: any;
    
    event: MyEvent;
    
    dialogVisible: boolean = false;
    
    idGen: number = 100;
    
    constructor(private eventService: EventService, private cd: ChangeDetectorRef) &#123; &#125;

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
        
        this.header = &#123;
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		&#125;;
    &#125;
    
    handleDayClick(event) &#123;
        this.event = new MyEvent();
        this.event.start = event.date.format();
        this.dialogVisible = true;
        
        //trigger detection manually as somehow only moving the mouse quickly after click triggers the automatic detection
        this.cd.detectChanges();
    &#125;
    
    handleEventClick(e) &#123;
        this.event = new MyEvent();
        this.event.title = e.calEvent.title;
        
        let start = e.calEvent.start;
        let end = e.calEvent.end;
        if(e.view.name === 'month') &#123;
            start.stripTime();
        &#125;
        
        if(end) &#123;
            end.stripTime();
            this.event.end = end.format();
        &#125;

        this.event.id = e.calEvent.id;
        this.event.start = start.format();
        this.event.allDay = e.calEvent.allDay;
        this.dialogVisible = true;
    &#125;
    
    saveEvent() &#123;
        //update
        if(this.event.id) &#123;
            let index: number = this.findEventIndexById(this.event.id);
            if(index >= 0) &#123;
                this.events[index] = this.event;
            &#125;
        &#125;
        //new
        else &#123;
            this.event.id = this.idGen++;
            this.events.push(this.event);
            this.event = null;
        &#125;
        
        this.dialogVisible = false;
    &#125;
    
    deleteEvent() &#123;
        let index: number = this.findEventIndexById(this.event.id);
        if(index >= 0) &#123;
            this.events.splice(index, 1);
        &#125;
        this.dialogVisible = false;
    &#125;
    
    findEventIndexById(id: number) &#123;
        let index = -1;
        for(let i = 0; i < this.events.length; i++) &#123;
            if(id == this.events[i].id) &#123;
                index = i;
                break;
            &#125;
        &#125;
        
        return index;
    &#125;
&#125;

export class MyEvent &#123;
    id: number;
    title: string;
    start: string;
    end: string;
    allDay: boolean = true;
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@Injectable()
export class EventService &#123;
    
    constructor(private http: Http) &#123;&#125;

    getEvents() &#123;
        return this.http.get('showcase/resources/data/scheduleevents.json')
                    .toPromise()
                    .then(res =&gt; &lt;any[]&gt; res.json().data)
                    .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
